<template>
  <app-module>
    <div slot="top" class="app-service-center-content-charter__top">
      <div class="app-service-center-content-charter__top__title-wrapper">
        <div class="app-service-center-content-charter__top__title-wrapper__title">授信信息</div>
      </div>
    </div>
    <div slot="center" class="app-service-center-content-charter__center">
      <t-table :items="store.charters" size="normal" border stripe>
        <t-table-column label="客户编号" prop="cusId" width="1"></t-table-column>
        <t-table-column label="姓名" prop="name" width="1"></t-table-column>
        <t-table-column label="性别" prop="sex" width="1"></t-table-column>
        <t-table-column label="年龄" prop="age" width="1"></t-table-column>
        <t-table-column label="状态" prop="state" width="1"></t-table-column>
        <t-table-column label="操作" prop="action" width="4">
          <template slot-scope="scope">
            <t-button size="mini" type="primary" @click="initUpdateDialog(scope)">用户详情</t-button>
            <t-button size="mini" type="primary" @click="initSubmitStatusDialog(scope)">授信详情</t-button>
            <t-button v-if="$stateHub.rolename === 'MANAGER' && scope.item.state === '待报送'" size="mini" type="primary" @click="submit(scope)">报送</t-button>
            <t-button v-if="$stateHub.rolename === 'MANAGER' && scope.item.state !== '待报送'" size="mini" type="primary" @click="" disabled>报送</t-button>
            <t-button v-if="$stateHub.rolename === 'MANAGER' && scope.item.state === '待报送'" size="mini" type="primary" @click="initDismissDialog(scope)">驳回</t-button>
            <t-button v-if="$stateHub.rolename === 'MANAGER' && scope.item.state !== '待报送'" size="mini" type="primary" @click="" disabled>驳回</t-button>
            <t-button v-if="$stateHub.rolename === 'LEADER' && scope.item.state === '待审核'" size="mini" type="primary" @click="accept(scope)">接受</t-button>
            <t-button v-if="$stateHub.rolename === 'LEADER' && scope.item.state !== '待审核'" size="mini" type="primary" @click="" disabled>接受</t-button>
            <t-button v-if="$stateHub.rolename === 'LEADER' && scope.item.state === '待审核'" size="mini" type="primary" @click="initDismissDialog(scope)">驳回</t-button>
            <t-button v-if="$stateHub.rolename === 'LEADER' && scope.item.state !== '待审核'" size="mini" type="primary" @click="initDismissDialog(scope)" disabled>驳回</t-button>
          </template>
        </t-table-column>
      </t-table>
    </div>
    <div v-if="$stateHub.rolename === 'COUNTER_EMPLOYEE'" slot="bottom" class="app-service-center-content-charter__bottom__btn-wrapper">
      <t-button type="insert" size="normal" style="margin-right: 0.5rem;" @click="initCreateDialog">网页新增个人信息</t-button>
      <el-upload class="upload-demo" style="margin-right: 0.5rem;" :action="uploadSelfInfo" multiple :limit="3" :on-success="onSelfInfoUploadSuccess" :with-credentials="true">
        <t-button size="normal" type="primary">文件导入个人信息</t-button>
      </el-upload>
			<el-upload class="upload-demo" :action="uploadAssetsInfo" multiple :limit="3" :on-success="onAssetsInfoUploadSuccess" :with-credentials="true">
        <t-button size="normal" type="primary">文件导入资产信息</t-button>
      </el-upload>
    </div>
    <div slot="other">
      <charter-create-dialog :store="store" @close="closeCreateDialog"></charter-create-dialog>
      <charter-update-dialog :store="store" @close="closeUpdateDialog"></charter-update-dialog>
      <charter-submit-status-dialog :store="store" @close="closeSubmitStatusDialog"></charter-submit-status-dialog>
      <charter-dismiss-dialog :store="store" @close="closeDismissDialog"></charter-dismiss-dialog>
    </div>
  </app-module>
</template>

<script>
  import TButton from '@/components/button';
  import TTable from '@/components/table';
  import TTableColumn from '@/components/table/table-column';
  import CharterCreateDialog from '@/app/service/center/content/charter/create-dialog';
  import CharterUpdateDialog from '@/app/service/center/content/charter/update-dialog';
  import CharterDismissDialog from '@/app/service/center/content/charter/dismiss-dialog';
  import CharterSubmitStatusDialog from '@/app/service/center/content/charter/submit-status-dialog';
  import AppModule from '@/app/service/center/content/module';
  
  export default {
    name: 'app-service-center-content-charter',
    components: {
      TButton,
      TTable,
      TTableColumn,
      CharterCreateDialog,
      CharterUpdateDialog,
      CharterDismissDialog,
      CharterSubmitStatusDialog,
      AppModule,
    },
    data() {
      return {
        store: {
          charters: [],
          current: {
            item: null,
            input: {
              property: '',
              deposit: '',
              financial: '',
              dismissreason: '',
              level: '',
              expectedLoan: '',
            },
          },
          createDialog: {
            title: '',
            visible: false,
          },
          updateDialog: {
            title: '',
            visible: false,
          },
          dismissDialog: {
            title: '',
            visible: false,
          },
          submitStatusDialog: {
            title: '',
            visible: false,
          },
        },
      };
    },
    watch: {
      /* eslint-disable object-shorthand */
      '$route'() {
        const target = 'api/user-infos';
        this.$http.request({
          url: target,
          method: 'get',
        }).then((response) => {
          this.init(response.data);
        });
      },
    },
    computed: {
      uploadSelfInfo() {
        let url = '';
        if (process.env.NODE_ENV === 'development') {
          url = 'http://127.0.0.1:8050/api/user-infos/file/self';
        } else {
          url = 'https://www.todaytomato.com:8050/api/user-infos/file/self';
        }
        return url;
      },
      uploadAssetsInfo() {
        let url = '';
        if (process.env.NODE_ENV === 'development') {
          url = 'http://127.0.0.1:8050/api/user-infos/file/assets';
        } else {
          url = 'https://www.todaytomato.com:8050/api/user-infos/file/assets';
        }
        return url;
      },
    },
    mounted() {
      const target = 'api/user-infos';
      this.$http.request({
        url: target,
        method: 'get',
      }).then((response) => {
        this.init(response.data);
      });
    },
    methods: {
      onSelfInfoUploadSuccess() {
        this.store.charters = [];
        const target = 'api/user-infos';
        this.$http.request({
          url: target,
          method: 'get',
        }).then((response) => {
          this.init(response.data);
          this.$noticeHub.success({ message: '个人信息上传成功', description: '请进行下一步操作！', duration: 3000 });
        });
      },
      onAssetsInfoUploadSuccess() {
        this.store.charters = [];
        const target = 'api/user-infos';
        this.$http.request({
          url: target,
          method: 'get',
        }).then((response) => {
          this.init(response.data);
          this.$noticeHub.success({ message: '资产上传成功', description: '请进行下一步操作！', duration: 3000 });
        });
      },
      submit(scope) {
        const id = scope.item.id;
        const target = 'api/manager/submit';
        this.$http.request({
          url: target,
          method: 'post',
          data: {
            id,
          },
          transformRequest: [(data) => {
            const encodeId = encodeURIComponent(data.id);
            return `id=${encodeId}`;
          }],
        }).then((response) => {
          this.store.charters = [];
          this.init(response.data);
        });
      },
      accept(scope) {
        const id = scope.item.id;
        const target = 'api/leader/accept';
        this.$http.request({
          url: target,
          method: 'post',
          data: {
            id,
          },
          transformRequest: [(data) => {
            const encodeId = encodeURIComponent(data.id);
            return `id=${encodeId}`;
          }],
        }).then((response) => {
          this.store.charters = [];
          this.init(response.data);
        });
      },
      init(payload) {
        Object.values(payload).forEach((item) => {
          this.store.charters.push({
            cusId: item.cusId,
            name: item.name,
            sex: item.sex,
            age: item.age,
            state: item.state,
            idCardNumber: item.idCardNumber,
            property: item.property,
            deposit: item.deposit,
            financial: item.financial,
            id: item.id,
            level: item.level,
            expectedLoan: item.expectedLoan,
          });
        });
      },
      initSubmitStatusDialog(scope) {
        this.store.submitStatusDialog.title = '报送详情';
        this.store.submitStatusDialog.type = 'submit-status';
        this.setCurrentItem(scope.item.id);
        this.openSubmitStatusDialog();
      },
      openSubmitStatusDialog() {
        this.store.submitStatusDialog.visible = true;
      },
      closeSubmitStatusDialog() {
        this.store.submitStatusDialog.visible = false;
        this.finalizeDialog();
      },
      initDismissDialog(scope) {
        this.store.dismissDialog.title = '驳回报送请求';
        this.store.dismissDialog.type = 'dismiss';
        this.setCurrentItem(scope.item.id);
        this.openDismissDialog();
      },
      openDismissDialog() {
        this.store.dismissDialog.visible = true;
      },
      closeDismissDialog() {
        this.store.dismissDialog.visible = false;
        this.finalizeDialog();
      },
      initCreateDialog() {
        this.store.createDialog.title = '新增个人信息';
        this.store.createDialog.type = 'create';
        this.openCreateDialog();
      },
      initUpdateDialog(scope) {
        this.store.updateDialog.title = '用户详情';
        this.store.updateDialog.type = 'update';
        this.setCurrentItem(scope.item.id);
        this.openUpdateDialog();
      },
      openCreateDialog() {
        this.store.createDialog.visible = true;
      },
      openUpdateDialog() {
        this.store.updateDialog.visible = true;
      },
      closeCreateDialog() {
        this.store.createDialog.visible = false;
        this.finalizeDialog();
      },
      closeUpdateDialog() {
        this.store.updateDialog.visible = false;
        this.finalizeDialog();
      },
      finalizeDialog() {
        this.store.createDialog.title = '';
        this.store.updateDialog.title = '';
        this.store.dismissDialog.title = '';
        this.store.submitStatusDialog.title = '';
        this.clearCurrentItem();
      },
      setCurrentItem(id) {
        this.store.current.item = this.store.charters.filter((item) => {
          if (item.id === id) {
            this.store.current.input.property = item.property;
            this.store.current.input.deposit = item.deposit;
            this.store.current.input.level = item.level;
            this.store.current.input.expectedLoan = item.expectedLoan;
            this.store.current.input.financial = item.financial;
            return item;
          }
          return null;
        })[0];
      },
      clearCurrentItem() {
        this.store.createDialog.title = '';
        this.store.updateDialog.title = '';
        this.store.current.item = null;
        this.store.current.input.property = '';
        this.store.current.input.deposit = '';
        this.store.current.input.level = '';
        this.store.current.input.financial = '';
        this.store.current.input.expectedLoan = '';
      },
    },
  };
</script>
<style>
	.el-upload-list {
		display: none;
	}
</style>
